import React from 'react';
// 文章显示
import ReactMarkdown from 'react-markdown';
// 划线、表、任务列表和直接url等的语法扩展, 支持GitHub Flavored Markdown语法
import remarkGfm from 'remark-gfm';
// 解析标签，支持html语法
import rehypeRaw from 'rehype-raw';
// 目录
import markdownNavbar from 'markdown-navbar';
// 代码高亮
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
// 高亮的主题
import {
  vscDarkPlus,
  coldarkDark,
  /* coyWithoutShadows */
  darcula
} from 'react-syntax-highlighter/dist/esm/styles/prism';

interface MarkdownProps {
  children: string;
  darkMode?: boolean; // markdown文本
  style?: React.CSSProperties;
}

const them = {
  dark: vscDarkPlus,
  dark1: coldarkDark,
  light: coldarkDark // coyWithoutShadows
};

const Markdown = (props: MarkdownProps) => {
  // markdown 文件内容
  const { children, darkMode = true, style = {} } = props;

  if (typeof darkMode === 'undefined') {
    them.light = darcula;
  }
  if (typeof darkMode === 'boolean') {
    // them.light = coyWithoutShadows;
    them.light = coldarkDark;
  }

  const components = {
    code: props => {
      const { node, inline, className, children, ...rest } = props;
      const match = /language-(\w+)/.exec(className || '');
      return !inline && match ? (
        <SyntaxHighlighter
          showLineNumbers={true}
          style={darkMode ? them.dark : them.light}
          language={match[1]}
          PreTag="div"
          {...rest}
        >
          {String(children).replace(/\n$/, '')}
        </SyntaxHighlighter>
      ) : (
        <code className={className} {...rest}>
          {children}
        </code>
      );
    }
    // h1: ({ children }: any) => (
    //   <h1 className='data-toc' data-toc='1'>
    //     {children}
    //   </h1>
    // ),
    // h2: ({ children }: any) => (
    //   <h2 className='data-toc' data-toc='2'>
    //     {children}
    //   </h2>
    // ),
    // h3: ({ children }: any) => (
    //   <h3 className='data-toc' data-toc='3'>
    //     {children}
    //   </h3>
    // ),
    // h4: ({ children }: any) => (
    //   <h4 className='data-toc' data-toc='4'>
    //     {children}
    //   </h4>
    // ),
    // h5: ({ children }: any) => (
    //   <h5 className='data-toc' data-toc='5'>
    //     {children}
    //   </h5>
    // ),
    // h6: ({ children }: any) => (
    //   <h6 className='data-toc' data-toc='6'>
    //     {children}
    //   </h6>
    // ),
    // p: ({ children }: any) =>
    //   String(children) === "@[toc]" ? (
    //     <Toc HElements={wrap.current?.getElementsByClassName("data-toc") as any} />
    //   ) : (
    //     <p>{children}</p>
    //   )
  };

  return (
    <div style={Object.assign({ padding: '10px' }, style)}>
      <ReactMarkdown
        // 使用github-markdown-css样式的话className必须是markdown-body
        className="markdown-body"
        // 插件及选项
        remarkPlugins={[remarkGfm]}
        // rehypeRaw
        rehypePlugins={[rehypeRaw]}
        components={components}
      >
        {children}
      </ReactMarkdown>
    </div>
  );
};

export default Markdown;
